<template>
	<view class="Industry">
		<view class="video-wrapper" @click="isPlaying = true">
			<!-- 自定义封面图 -->
			<image v-if="!isPlaying" src="/static/video.jpg" />
			<!-- 自定义播放按钮 -->
			<view class="play-btn">▶</view>
			<video v-if="isPlaying" src="/static/video.mp4" autoplay></video>
		</view>
		<view class="list">
			<view class="item">
				<p>煎熬16年的乙醇汽油为什么没普及？</p>
				<div class="time">2025/09/03</div>
				<hr color="#eee" />
			</view>
			<view class="item">
				<p>海湾专业规模型风电场拟于年底启动建设</p>
				<div class="time">2025/09/03</div>
				<hr color="#eee" />
			</view>
			<view class="item">
				<p>充电更省力：日本研发可贴在衣服上的太阳能电池</p>
				<div class="time">2025/09/03</div>
				<hr color="#eee" />
			</view>
			<view class="item">
				<p>2040年风电光伏在全球发电占多大比例？IEA说16%；BNEF说34%</p>
				<div class="time">2025/09/03</div>
				<hr color="#eee" />
			</view>
			<view class="item">
				<p>中国资本看好清洁能源行业</p>
				<div class="time">2025/09/03</div>
				<hr color="#eee" />
			</view>
			<view class="item">
				<p>国家能源局分布式发电和海上风电座谈会在中天科技召开</p>
				<div class="time">2025/09/03</div>
				<hr color="#eee" />
			</view>
			<view class="item">
				<p>海峡两岸在光伏等领域达成4项共通标准</p>
				<div class="time">2025/09/03</div>
				<hr color="#eee" />
			</view>
			<view class="item">
				<p>多能互补将为清洁能源发展主要特征</p>
				<div class="time">2025/09/03</div>
				<hr color="#eee" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPlaying: false,
			};
		}
	}
</script>

<style lang="scss">
	/* #ifndef H5 */
	.Industry {
		padding-top: 50rpx;
	}
	/* #endif */

	.video-wrapper {
		position: relative;
		padding: 30rpx;

		image,
		video {
			width: 100%;
			height: 400rpx;
			border-radius: 12rpx;
		}

		.play-btn {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: white;
			font-size: 40rpx;
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
		}
	}

	.list {
		padding: 30rpx;

		.item {
			margin-bottom: 20rpx;

			p {
				margin-bottom: 30rpx;
			}

			.time {
				font-size: 20rpx;
				color: #848e98;
				margin: 30rpx 0 20rpx;
			}
		}
	}
</style>